<template>
	<view>
		<view class="goodsBox" v-for="(item, index) in list" :key="index">
			<view class="u-flex">
				<view style="position: relative">
					<image class="goodsImg" :src="item.image"></image>
					<view style="position: absolute; top: -10rpx; left: -10rpx">
						<u-tag text="直播中" size="mini" v-if="item.liveStatus == 1 && item.hasLive == 0" type="warning"></u-tag>
						<u-tag text="未开播" size="mini" v-if="item.liveStatus == 0 && item.hasLive == 0"></u-tag>
					</view>
				</view>

				<view class="info u-flex u-flex-m">
					<view class="title">{{ item.courseName }}</view>
					<view>
						<u-tag text="直播" size="mini" v-if="item.hasLive == 0"></u-tag>
						<u-tag text="录播" size="mini" v-if="item.hasLive == 1" type="success"></u-tag>
					</view>
					<view class="desc u-line-1">{{ item.overview || '暂无简介' }}</view>
					<view class="tag-desc">
						<view class="teacher">主讲老师：{{ item.teacherName }}</view>
					</view>
				</view>
			</view>
			<!-- 判断是否有直播讲师 -->
			<view class="right">
				<view v-if="item.liveTeracher && item.liveTeracher.length > 0">
					<view v-for="(teacher, idx) in item.liveTeracher" :key="idx" class="teacher-button">
						<button type="primary" size="mini" @tap="handleLiveTeacher(item, teacher)">看{{ teacher.name }}的直播</button>
					</view>
				</view>
				<!-- 如果没有直播讲师，显示立即学习按钮 -->
				<view v-else class="teacher-button">
					<button type="primary" size="mini" @tap="handleStudy(item)">立即学习</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array
		},
		orderNum: {
			type: String
		}
	},
	methods: {
		handleStudy(item) {
			console.log('handleLiveTeacher-item', item);
			uni.navigateTo({
				url: `/pages/live/live?orderNum=${this.orderNum}&courseId=${item.id}`
			});
		},
		handleLiveTeacher(item, teacher) {
			console.log('handleLiveTeacher-item', item);
			console.log('handleLiveTeacher-teacher', teacher);
			uni.navigateTo({
				url: `/pages/live/live?teacherId=${teacher.id}&orderNum=${this.orderNum}&courseId=${item.id}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.goodsBox {
	padding: 25rpx 32rpx;
	border-bottom: 2rpx solid #f5f5f5;
	background: #fff;
	align-items: flex-start;

	.goodsImg {
		width: 285rpx;
		height: 180rpx;
		border-radius: 4rpx;
	}
	.right {
		display: flex;
		justify-content: right;
		.teacher-button {
			display: flex;
			width: 100%;
			justify-content: right;
			margin-top: 5px;
			flex-wrap: wrap;
			gap: 10px;
		}
		button {
			width: 140px;
			text-align: center; /* 文字居中对齐 */
			display: inline-block;
			white-space: nowrap; /* 防止文字换行 */
			overflow: hidden; /* 防止文字溢出 */
		}
	}

	.info {
		height: 180rpx;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		padding-left: 20rpx;

		.title {
			font-size: 20rpx;
			color: #333;
		}

		.desc {
			width: 100%;
			font-size: 26rpx;
			color: #666;
		}

		.tag-desc {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			color: #666;
			margin-top: 15rpx;
		}
	}
}
</style>
